import { View } from '@tarojs/components'
import { AtForm, AtInput } from 'taro-ui'
import { Select } from '../Select'

export const DebtForm = ({
  formData,
  creditorOptions,
  paymentTypeOptions,
  handleCreditorChange,
  handlePaymentTypeChange,
  handleInputChange,
  fields,
  children
}) => {
  return (
    <View className="bg-white rounded-lg shadow-sm mb-4">
      <AtForm>
        <Select
          title="债权人"
          value={formData.creditor}
          options={creditorOptions}
          rangeKey="name"
          valueKey="id"
          onChange={handleCreditorChange}
          required
        />

        <Select
          title="还款方式"
          value={formData.paymentType}
          options={paymentTypeOptions}
          rangeKey="label"
          valueKey="value"
          onChange={handlePaymentTypeChange}
          required
        />

        {fields.map(field => (
          <View key={field.name} className="border-b border-gray-100">
            <AtInput
              name={field.name}
              title={field.title}
              type={field.type}
              value={formData[field.name]}
              onChange={value => handleInputChange(value, field.name)}
              placeholder={field.placeholder}
              disabled={field.disabled}
              className="mb-0"
            />
          </View>
        ))}

        {children}
      </AtForm>
    </View>
  )
}
